<template>

  <el-main style="height: 930px;">

    <div style="margin: 10px 0">
      <el-button type="primary" @click="addWarehouse">新增<i class="el-icon-circle-plus-outline"></i></el-button>
      <el-input style="width: 200px" placeholder="请输入库房名称" suffix-icon="el-icon-search"  v-model="selectWarehouseName"></el-input>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>


    <div>
      <el-table
        :data="warehouseTableData"
        :cell-style="{textAlign:'center'}"
        :header-cell-style="{textAlign:'center'}"
        style="width: 100%;"
        empty-text="无"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="库房号" width="120"></el-table-column>
        <el-table-column prop="warehouseName" label="库房名称" width="120"></el-table-column>
        <el-table-column prop="address" label="库房地址" width="120"></el-table-column>
        <el-table-column prop="manager" label="库管员" width="120"></el-table-column>
        <el-table-column prop="level" label="级别" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.level == 'CENTER'">中心库房</span>
            <span v-if="scope.row.level == 'DISTRIBUTE'">分站</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"   align="center">
          <template slot-scope="scope">
            <el-button type="success" @click="chosenWarehouseShow(scope.$index, scope.row)">查看商品详情<i class="el-icon-edit"></i></el-button>
            <el-button type="success" @click="chosenWarehouseEdit(scope.$index,scope.row)">编辑<i class="el-icon-edit"></i></el-button>
            <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="delWarehouse(scope.row.id)"
            >
              <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="padding: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog title="新增库房" :visible.sync="createWarehouseDialogVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="库房名称">
          <el-input v-model="createWarehouseDialog.warehouseName" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="库房地址">
          <el-input v-model="createWarehouseDialog.address" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="库管员">
          <el-input v-model="createWarehouseDialog.manager" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="库房级别">
          <el-select v-model="createWarehouseDialog.level" placeholder="请选择库房级别" style="width: 300px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createWarehouseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="carDesDialogShow">下一步</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑库房" :visible.sync="editWarehouseDialogVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="库房名称">
          <el-input v-model="editWarehouseDialog.warehouseName" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="库房地址">
          <el-input v-model="editWarehouseDialog.address" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="库管员">
          <el-input v-model="editWarehouseDialog.manager" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="库房级别">
          <el-select v-model="editWarehouseDialog.level" placeholder="请选择库房级别" style="width: 300px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editWarehouseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="nextEdit">下一步</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增商品详情" :visible.sync="addCargoDescriptionDialogVisible">
      <el-table :data="createCargoTableData">
        <el-table-column property="cargoName" label="商品名称" width="120"></el-table-column>
        <el-table-column property="warnQuantities" label="预警值"></el-table-column>
        <el-table-column property="maxQuantities" label="最大值"></el-table-column>
        <el-table-column property="quantities" label="数量"></el-table-column>
        <el-table-column property="preQuantities" label="预计入库数量"></el-table-column>
        <el-table-column property="preOutQuantities" label="预计出库数量"></el-table-column>
        <el-table-column label="操作"  width="200" align="center">
          <template slot-scope="scope1">
            <el-button type="success" @click="editAddCarDesShow(scope1.$index)">编辑<i class="el-icon-edit"></i></el-button>
            <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="delCreateCargoDes(scope1.row.cargoName)"
            >
              <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCargoDescriptionDialogVisible = false">上一步</el-button>
        <el-button type="primary" @click="createCarDialogShow">新增</el-button>
        <el-button type="primary" @click="finish">完成</el-button>
      </div>
    </el-dialog>

    <el-dialog title="展示商品详情" :visible.sync="showCargoDescriptionDialogVisible">
      <el-table :data="showCargoTableData">
        <el-table-column property="cargoName" label="商品名称" width="120"></el-table-column>
        <el-table-column property="warnQuantities" label="预警值"></el-table-column>
        <el-table-column property="maxQuantities" label="最大值"></el-table-column>
        <el-table-column property="quantities" label="数量"></el-table-column>
        <el-table-column property="preQuantities" label="预计入库数量"></el-table-column>
        <el-table-column property="preOutQuantities" label="预计出库数量"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="编辑商品详情" :visible.sync="editCargoDescriptionDialogVisible">
      <el-table :data="editCargoTableData">
        <el-table-column property="cargoName" label="商品名称" width="120"></el-table-column>
        <el-table-column property="warnQuantities" label="预警值"></el-table-column>
        <el-table-column property="maxQuantities" label="最大值"></el-table-column>
        <el-table-column property="quantities" label="数量"></el-table-column>
        <el-table-column property="preQuantities" label="预计入库数量"></el-table-column>
        <el-table-column property="preOutQuantities" label="预计出库数量"></el-table-column>
        <el-table-column label="操作"  width="200" align="center">
          <template slot-scope="scope1">
            <el-button type="success" @click="editEditCarDesShow(scope1.$index)">编辑<i class="el-icon-edit"></i></el-button>
            <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="delEditCargoDes(scope1.row.cargoName)"
            >
              <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCargoDescriptionDialogVisible = false">上一步</el-button>
        <el-button type="primary" @click="editCarDialogShow">新增</el-button>
        <el-button type="primary" @click="editCargoDes">完成</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增库房商品表格" :visible.sync="createCargoDialogVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="商品名称">
        <el-input v-model="createCargoDialog.cargoName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预警值">
          <el-input v-model="createCargoDialog.warnQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大值">
          <el-input v-model="createCargoDialog.maxQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="createCargoDialog.quantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预计入库数量">
          <el-input v-model="createCargoDialog.preQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预计出库数量">
          <el-input v-model="createCargoDialog.preOutQuantities" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createCargoDialogVisible = false">上一步</el-button>
        <el-button type="primary" @click="addCargoDes">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑新增表格商品" :visible.sync="editAddCargoDialogVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="商品名称">
        <el-input v-model="createCargoDialog.cargoName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预警值">
          <el-input v-model="createCargoDialog.warnQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大值">
          <el-input v-model="createCargoDialog.maxQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="createCargoDialog.quantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预计入库数量">
          <el-input v-model="createCargoDialog.preQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预计出库数量">
          <el-input v-model="createCargoDialog.preOutQuantities" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editAddCargoDialogVisible = false">上一步</el-button>
        <el-button type="primary" @click="addEditCargoDes()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增编辑表格商品" :visible.sync="createEditCargoDialogVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="商品名称">
          <el-input v-model="createCargoDialog.cargoName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预警值">
          <el-input v-model="createCargoDialog.warnQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大值">
          <el-input v-model="createCargoDialog.maxQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="createCargoDialog.quantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预计入库数量">
          <el-input v-model="createCargoDialog.preQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预计出库数量">
          <el-input v-model="createCargoDialog.preOutQuantities" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createCargoDialogVisible = false">上一步</el-button>
        <el-button type="primary" @click="createEditCargoDes">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑编辑表格商品" :visible.sync="editEditCargoDialogVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="商品名称">
          <el-input v-model="createCargoDialog.cargoName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预警值">
          <el-input v-model="createCargoDialog.warnQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大值">
          <el-input v-model="createCargoDialog.maxQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="createCargoDialog.quantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预计入库数量">
          <el-input v-model="createCargoDialog.preQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预计出库数量">
          <el-input v-model="createCargoDialog.preOutQuantities" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editWarehouseDialogVisible = false">上一步</el-button>
        <el-button type="primary" @click="editEditCargoDes()">确 定</el-button>
      </div>
    </el-dialog>

  </el-main>

</template>

<script>
import axios from "axios";
export default{
  name: 'WarehouseManage',
  data(){
    return {
      options: [
        {
          value: 'CENTER',
          label: '中心库房'
        }, {
          value: 'DISTRIBUTE',
          label: '分站'
        }],
      warehouseTableData: [],
      createCargoTableData: [],
      showCargoTableData:[],
      editCargoTableData:[],
      warehouseTotal: 0,
      pageNum: 1,
      total:0,
      pageSize: 10,
      selectWarehouseName: "",
      createWarehouseDialog: {},
      createCargoDialog:{},
      editWarehouseDialog:{},
      loading:false,
      createWarehouseDialogVisible: false,
      addCargoDescriptionDialogVisible:false,
      editCargoDescriptionDialogVisible:false,
      showCargoDescriptionDialogVisible:false,
      createEditCargoDialogVisible:false,
      editAddCargoDialogVisible:false,
      createCargoDialogVisible:false,
      editEditCargoDialogVisible:false,
      editWarehouseDialogVisible:false,
      multipleSelection: [],
      editAddChosenIndex:"",
      editEditChosenIndex:"",
      editCargoName:"",
      resData:{}
    }
  },
  created() {
    this.load()
  },
  methods: {

    load() {        ////搜索，加载最外层表格函数
      axios.post("http://127.0.0.1:8080/test/warehouseAdmin/getAllWarehousePage", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        warehouseName: this.selectWarehouseName,
      }).then(res => {
        this.warehouseTableData = res.data.data.list;
        this.resData = res.data;
        this.total = res.data.data.total;
      })
    },

    reset() {      ////重置最外层表格函数
      this.selectWarehouseName = ""
      this.load()
    },

    chosenWarehouseShow(index, row){         ////最外层表格显示商品详情的按钮
      this.showCargoTableData = this.resData.data.list[index].list;
      this.showCargoDescriptionDialogVisible = true;
    },

    delWarehouse(warehouseName) {      //删除调拨单
      axios.get("http://127.0.0.1:8080/test/warehouseAdmin/delete/" + warehouseName).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message.success("删除成功")
          this.load();
        } else {
          this.$message.error("删除失败")
        }
      })
    },

    addWarehouse() {         // //点击主页面新增按钮后弹出创建新种类对话框函数
      this.createWarehouseDialogVisible = true
      this.createWarehouseDialog = {}
    },

    carDesDialogShow() {            ////新增种类的对话框点击下一步后显示商品表格的函数
      this.addCargoDescriptionDialogVisible = true;
    },

    editAddCarDesShow(index) {  //新增按钮后新增商品表格的编辑函数
      this.editAddChosenIndex = index;
      this.editAddCargoDialogVisible = true;
    },

    addEditCargoDes() {         //新增商品表格编辑按钮后弹出的对话框中的确认函数
      this.createCargoTableData[this.editAddChosenIndex].cargoName = this.createCargoDialog.cargoName;
      this.createCargoTableData[this.editAddChosenIndex].warnQuantities = this.createCargoDialog.warnQuantities;
      this.createCargoTableData[this.editAddChosenIndex].maxQuantities = this.createCargoDialog.maxQuantities;
      this.createCargoTableData[this.editAddChosenIndex].quantities = this.createCargoDialog.quantities;
      this.createCargoTableData[this.editAddChosenIndex].preQuantities = this.createCargoDialog.preQuantities;
      this.createCargoTableData[this.editAddChosenIndex].preOutQuantities = this.createCargoDialog.preOutQuantities;

      this.refresh();
      this.editAddCargoDialogVisible = false;
    },

    createCarDialogShow() {     // //新增商品表格中弹出添加商品对话框的函数
      this.createCargoDialogVisible = true;
    },

    addCargoDes() {                 ////新增商品中添加商品对话框中点击确定添加的函数，将商品信息暂存到新增表格
      this.createCargoTableData.push(
        { "cargoName": this.createCargoDialog.cargoName,
          "warnQuantities": this.createCargoDialog.warnQuantities,
          "maxQuantities": this.createCargoDialog.maxQuantities,
          "quantities": this.createCargoDialog.quantities,
          "preQuantities":this.createCargoDialog.preQuantities,
          "preOutQuantities":this.createCargoDialog.preOutQuantities,
        });
      this.refresh();
      this.createCargoDialogVisible = false;
    },

    delCreateCargoDes(cargoName) {        //新增商品表格中删除商品的函数
      let data = this.createCargoTableData.find(line => line.cargoName === cargoName);
      this.createCargoTableData.splice(this.createCargoTableData.indexOf(data), 1);
    },

    finish() {                 //将新增种类和该种类中新增的商品表格数据传回后台的函数
      axios.post("http://127.0.0.1:8080/test/warehouseAdmin/generateWarehouse",
        {
          "warehouseName": this.createWarehouseDialog.warehouseName,
          "address": this.createWarehouseDialog.address,
          "manager": this.createWarehouseDialog.manager,
          "level": this.createWarehouseDialog.level,
          "cargoSettingInf": this.createCargoTableData
        }).then(res=>{
        if (res.data.code === 200) {
          this.$message.success("新增成功")
          this.load()
        } else {
          this.$message.error("新增失败")
        }
      });
      this.addCargoDescriptionDialogVisible = false;
      this.createWarehouseDialogVisible = false;
      this.refresh();
    },

    chosenWarehouseEdit(index, row) {  //点击最外层表格后编辑按钮的函数，弹出编辑框
      this.editWarehouseDialog = JSON.parse(JSON.stringify(row));
      this.editCargoTableData = this.resData.data.list[index].list;
      this.editEditChosenIndex = index;
      this.editWarehouseDialogVisible = true;
    },

    nextEdit(){             ////编辑种类的下一步按钮，进入到编辑商品的表格
      this.editCargoDescriptionDialogVisible = true;
    },

    editEditCarDesShow(index) {  //编辑商品表格中的编辑按钮，打开编辑对话框
      this.editEditChosenIndex = index;
      this.editEditCargoDialogVisible = true;
    },

    editEditCargoDes() {         //编辑编辑对话框中的确认按钮，将编辑的内容暂存表格
      this.editCargoTableData[this.editEditChosenIndex].cargoName = this.createCargoDialog.cargoName;
      this.editCargoTableData[this.editEditChosenIndex].warnQuantities = this.createCargoDialog.warnQuantities;
      this.editCargoTableData[this.editEditChosenIndex].maxQuantities = this.createCargoDialog.maxQuantities;
      this.editCargoTableData[this.editEditChosenIndex].quantities = this.createCargoDialog.quantities;
      this.editCargoTableData[this.editEditChosenIndex].preQuantities = this.createCargoDialog.preQuantities;
      this.editCargoTableData[this.editEditChosenIndex].preOutQuantities = this.createCargoDialog.preOutQuantities;
      this.refresh();
      this.editEditCargoDialogVisible = false;
    },

    editCarDialogShow() {        //编辑表格中的新增按钮，弹出编辑表格中的新增对话框
      this.createEditCargoDialogVisible = true;
    },

    createEditCargoDes() {//编辑商品中添加商品对话框中点击确定添加的函数，将商品信息暂存到编辑表格
      this.editCargoTableData.push(
        { "cargoName": this.createCargoDialog.cargoName,
          "warnQuantities": this.createCargoDialog.warnQuantities,
          "maxQuantities": this.createCargoDialog.maxQuantities,
          "quantities": this.createCargoDialog.quantities,
          "preQuantities":this.createCargoDialog.preQuantities,
          "preOutQuantities":this.createCargoDialog.preOutQuantities,
        })
      this.refresh();
      this.createCargoDialogVisible = false;
      this.createEditCargoDialogVisible = false;
    },

    delEditCargoDes(cargoName) {        //编辑表格中删除商品按钮
      let data = this.editCargoTableData.find(line => line.cargoName === cargoName);
      this.editCargoTableData.splice(this.editCargoTableData.indexOf(data), 1);
    },

    editCargoDes(){         // //将编辑商品表格中的数据传回后台
      axios.post("http://127.0.0.1:8080/test/warehouseAdmin/update",
        {
          "id": this.editWarehouseDialog.id,
          "warehouseName": this.editWarehouseDialog.warehouseName,
          "address": this.editWarehouseDialog.address,
          "manager": this.editWarehouseDialog.manager,
          "level": this.editWarehouseDialog.level,
          "cargoSettingInf": this.editCargoTableData
        }).then(res=>{
        if (res.data.code === 200) {
          this.$message.success("编辑成功")
          this.load()
        } else {
          this.$message.error("编辑失败")
        }
        this.editCargoDescriptionDialogVisible = false,
        this.editWarehouseDialogVisible = false

      });

    },

    refresh(){
      this.createCargoDialog.cargoName = "";
      this.createCargoDialog.warnQuantities = "";
      this.createCargoDialog.maxQuantities = "";
      this.createCargoDialog.quantities = "";
      this.createCargoDialog.preQuantities = "";
      this.createCargoDialog.preOutQuantities = "";
    },


    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },

    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
  }
}

</script>

<style>

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #00aaff;
}

.el-table .quehuo {
  background: #FF0000;
}

.btn1 {
  position: relative;
  right: 0.625rem;
}

</style>

